<!DOCTYPE html>
<html lang="zh">

<head>

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>页面</title>
    <script src="https://pinzafile.oss-cn-shanghai.aliyuncs.com/vue-element/loading.js"></script>
    <link href="https://pinzafile.oss-cn-shanghai.aliyuncs.com/vue-element/lib/theme-chalk/index.css" rel="stylesheet">


</head>

<body>
<div id="app">
    <el-container v-loading="loading">
        <el-header>
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item>首页</el-breadcrumb-item>
                <el-breadcrumb-item>授权管理</el-breadcrumb-item>
                <el-breadcrumb-item>角色管理</el-breadcrumb-item>
                <el-breadcrumb-item>角色修改</el-breadcrumb-item>
            </el-breadcrumb>
        </el-header>
        <el-main>
            <el-form ref="roleForm" :model="roleForm" :rules="rules" label-width="80px" >

                <el-row>
                    <el-col :xs="24" :sm="16" :md="12" :lg="12" :xl="12">
                        <el-form-item label="角色名称" prop="name">
                            <el-input v-model="roleForm.name"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :xs="24" :sm="16" :md="12" :lg="12" :xl="12">
                        <el-form-item label="角色列表">
                            <el-tree :data="treeData" show-checkbox :default-expand-all="false" node-key="id" ref="tree"
                                     highlight-current :props="defaultProps" :check-strictly="true">
                            </el-tree>
                        </el-form-item>
                    </el-col>
                </el-row>

                <#if success == "success">
                <el-row>
                        <el-form-item>
                            <el-button type="primary" @click="submitForm('roleForm')">确认</el-button>
                            <a onclick="javascript:history.back(-1);">
                                <el-button>返回</el-button>
                            </a>
                        </el-form-item>
                </el-row>
                </#if>

            </el-form>
        </el-main>
    </el-container>
</div>
<script src="https://pinzafile.oss-cn-shanghai.aliyuncs.com/vue-element/dist/vue.js"></script>
<script src="https://pinzafile.oss-cn-shanghai.aliyuncs.com/vue-element/lib/index.js"></script>
<script src="https://pinzafile.oss-cn-shanghai.aliyuncs.com/publiccss/assets/global/plugins/jquery.min.js" type="text/javascript"></script>

<script>
    new Vue({
        el: '#app',
        data() {
            return {
                loading:false,
                //表单内容
                roleForm: {
                    id:'',
                    name: '',
                    tree: [],
                },
                //表单字段验证项
                rules: {
                    name: [{
                        required: true,
                        message: '请填写角色名称',
                        trigger: 'blur'
                    }]
                },
                treeData: ${list},
                defaultProps: {
                    children: 'children',
                    label: 'label'
                }

            }
        },
        methods: {

            //需要默认选中的数据的节点的ID数组
            setCheckedKeys() {
                this.roleForm.name = "${name}";
                this.roleForm.id = "${id}";
                // $.ajax({
                //     url: '/role/detail.json',
                //     type: 'post',
                //     data: {key:key},
                //     async: false,
                //     dataType: 'json',
                //     success: function (result) {
                //         if(result.ret){
                //             resultData = result.data;
                //         }
                //     }
                // });
                var mycars="${result}";
                mycars = mycars.split(",");
                this.$refs.tree.setCheckedKeys(mycars);
                // this.$refs.tree.setCheckedKeys(this.roleForm.tree);
            },

            submitForm(formName) {
                var tempForm = this.roleForm;
                //表单验证
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.loading=true;
                        //获取当前被选中的树的节点的ID值,放入data
                        tempForm.tree = this.$refs.tree.getCheckedKeys() + ","+ this.$refs.tree.getHalfCheckedKeys();
                        tempForm.id = this.roleForm.id;
                        tempForm.name = this.roleForm.name;
                        $.ajax({
                            url: '/role/update.json',
                            type: 'post',
                            data: tempForm,
                            dataType: 'json',
                            success: (result) =>{
                                if(result.ret){
                                    this.$message({
                                        message: "操作成功",
                                        type: 'success'
                                    });
                                    setTimeout(function () {
                                        window.location.href = "/role/list.page";
                                    }, 1000);
                                }else{
                                    this.$message.error("操作失败，请稍后重试");
                                }
                                this.loading=false;
                            }
                        });
                        //提交
                    } else {
                        this.$message.error('请检查表单内容');
                    }
                });
            },
        },
        //初始化加载函数
        mounted: function () {
            this.setCheckedKeys();
        }

    })
</script>

</body>

</html>